import React, { useEffect } from 'react';
import { useEchart } from 'hooklib';
import styles from './gauge.css';
import cs from './common.css';

require('echarts/lib/chart/gauge');
require('echarts/lib/component/legend');

export default function Gauge({ loginCount = 100, loginFailNum = 20 }) {
  const [refChart, onChartMount] = useEchart();

  useEffect(() => {
    refChart.current.setOption(makeOption(loginFailNum, loginCount));
  }, [refChart, loginFailNum, loginCount]);

  return (
    <div className={styles.normal}>
      <h1>Page gauge 1234</h1>
      <div ref={onChartMount} className={cs.chart}></div>
    </div>
  );
}

function makeOption(loginCount = 100, loginFailNum = 20) {
  const loginFailPercent = (loginFailNum / loginCount) * 100;
  return {
    title: {
      text: '登录失败率',
    },
    tooltip: {
      show: true,
    },
    legend: {
      // type: 'plain',
      show: true,
      z: 2,
      right: 'auto',
      data: [
        {
          name: 'loginFailPercent',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本为红色
          textStyle: {
            color: 'red',
          },
        },
        {
          name: 'loginFailPercent2',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本为红色
          textStyle: {
            color: 'red',
          },
        },
      ],
    },
    series: [
      {
        name: 'loginFailPercent',
        type: 'gauge',
        data: [{ value: loginFailPercent, name: '登录失败率' }], // 中间数字和底部名称
        title: {
          show: true,
          offsetCenter: [0, '65%'],
          color: 'gray',
        },
        detail: {
          show: true,
          formatter: value => `${value}{sign|%}`,
          offsetCenter: [0, '0%'],
          color: 'white',
          fontWeight: 400,
          rich: {
            sign: {
              fontSize: '17',
              color: 'white',
              verticalAlign: 'bottom',
            },
          },
        },
        markArea: {
          data: [
            [
              {
                name: '两个屏幕坐标之间的标域',
                x: 100,
                y: 100,
              },
              {
                x: '90%',
                y: '10%',
              },
            ],
          ],
        },
        radius: '55%',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          distance: -50,
          color: 'blue',
        },
        splitLine: {
          show: false,
        },
        pointer: {
          show: false,
        },
        itemStyle: {
          color: 'red',
        },
      },
    ],
  };
}
